<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sprotty Circles Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/page.css">
    <!-- support Microsoft browsers -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dom4/3.0.0/dom4.js">
</head>
<body>
    <div class="container">
        <div class="row" id="sprotty-app" data-app="circlegraph">
            <div class="col-md-10">
                <h1>Sprotty Circles Example</h1>
                <p>
                    <button id="addNode">Add node</button>
                    <button id="scrambleAll">Scramble all</button>
                    <button id="scrambleSelection">Scramble selection</button>
                </p>
            </div>
            <div class="help col-md-2">
                <a href="https://sprotty.org/docs/user-interaction/">Help</a>
            </div>
        </div>
        <div draggable="true" style="height: 70px; width: 70px;" ondragstart="dragstart(event)">
            <svg style="height: inherit; width:inherit">
                <g transform="translate(2, 2)">
                    <circle class="sprotty-node" r="30" cx="30" cy="30"></circle>
                    <text x="30" y="37" class="sprotty-text">drag</text>
                </g>
            </svg>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="sprotty" class="sprotty" />
            </div>
            <div class="copyright">
                &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function dragstart(ev) {
            ev.dataTransfer.setData("text/plain", ev.target.id);
        }
    </script>
    <script src="../resources/bundle.js"></script>
</body>

</html>